<template>
  <div>
    <!-- 删除警示 -->
    <el-dialog
      title="警告"
      :visible="true"
      :before-close="cancel"
      width="30%"
    >
      <span>
        <svg-icon icon-class="taskGrade1" font-size="50px" />
        {{ content }}
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" :disabled="num > 0" @click="confirm">
          确 定
          <span v-if="num > 0">（{{ num }}）</span>
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    time: {
      type: Number,
      default: 10
    },
    content: {
      type: String,
      default: '警告！是否确认删除？'
    }
  },

  data() {
    return {
      timing: '',
      num: this.time
    }
  },

  mounted() {
    this.timing = setInterval(() => {
      if (this.num > 0) {
        this.num--
      }
    }, 1000)
  },

  beforeDestroy() {
    clearInterval(this.timing)
  },

  methods: {
    confirm() {
      this.$emit('confirm')
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style>

</style>
